<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Textarea - Basic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>

<body>
  <ion-app>

    <ion-header>
      <ion-toolbar>
        <ion-title>Textarea - Basic</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content id="content">

      <ion-list>
        <ion-item>
          <ion-label color="primary">Inline Label</ion-label>
          <ion-textarea placeholder="Textarea"></ion-textarea>
        </ion-item>

        <ion-item>
          <ion-label color="primary" position="fixed">Fixed Label</ion-label>
          <ion-textarea placeholder="Textarea"></ion-textarea>
        </ion-item>

        <ion-item>
          <ion-textarea placeholder="Textarea with no label"></ion-textarea>
        </ion-item>

        <ion-item>
          <ion-label color="primary" position="stacked">Stacked Label</ion-label>
          <ion-textarea placeholder="Textarea"></ion-textarea>
        </ion-item>

        <ion-item>
          <ion-label color="primary" position="floating">Floating Label</ion-label>
          <ion-textarea id="timeout"></ion-textarea>
        </ion-item>

        <ion-item>
          <ion-label>Disabled</ion-label>
          <ion-textarea id="dynamicDisabled" value="Disabled" disabled></ion-textarea>
        </ion-item>

        <ion-item>
          <ion-label>Readonly</ion-label>
          <ion-textarea id="dynamicReadonly" value="Readonly" readonly></ion-textarea>
        </ion-item>

        <ion-item>
          <ion-label position="floating">Dynamic Value</ion-label>
          <ion-textarea id="dynamicValue" value="dynamic"></ion-textarea>
        </ion-item>

        <ion-item>
          <ion-label color="primary">Clear on Edit</ion-label>
          <ion-textarea clear-on-edit="true"></ion-textarea>
        </ion-item>

        <ion-item>
          <ion-label color="primary">Autogrow</ion-label>
          <ion-textarea auto-grow="true"></ion-textarea>
        </ion-item>
      </ion-list>

      <div class="ion-text-center">
        <ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
          Toggle Disabled
        </ion-button>

        <ion-button color="secondary" onclick="toggleBoolean('dynamicReadonly', 'readonly')">
          Toggle Readonly
        </ion-button>

        <ion-button color="light" onclick="toggleString('dynamicValue', 'value');">
          Toggle Value
        </ion-button>

        <ion-button color="danger" onclick="clearString('dynamicValue', 'value');">
          Clear Value
        </ion-button>
      </div>
    </ion-content>

    <script>
      var textarea = document.getElementById('timeout');
      setTimeout(() => {
        textarea.value = 'timeout';
      }, 1000);

      function toggleBoolean(id, prop) {
        var el = document.getElementById(id);

        var isTrue = el[prop] ? false : true;
        el[prop] = isTrue;
      }

      function toggleString(id, prop) {
        var el = document.getElementById(id);
        var newString = el[prop] === 'dynamic' ? 'changed' : 'dynamic';
        el[prop] = newString;
      }

      function clearString(id, prop) {
        var el = document.getElementById(id);

        el[prop] = '';
      }
    </script>
  </ion-app>
</body>

</html>
